<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<style>
	
	.node {
		width: 300px;
		height: 200px;
		background-color: #eee;
		position: absolute;
		top: 20px;
		left: 20px;
	}

	</style>
</head>
<body>
	<div class="nodeCanvas">
	
		<div class="node"></div>
		<div class="node"></div>
	</div>

	<script>
		
var nodeToDrag = undefined;
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

dragTest();

function dragTest() {
    var nodesToDrag = document.getElementsByClassName("node");

    for (var i = 0; i < nodesToDrag.length; i++) {
        var nodeElement = nodesToDrag[i];
        nodeElement.onmousedown = startNodeDrag;
    }
}

function initNodeDrag(element) {
    element.onmousedown = function (e) { startNodeDrag(e, element )};
}

function startNodeDrag(e) {
    nodeToDrag = e.target;
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = endNodeDrag;
    // call a function whenever the cursor moves:
    document.onmousemove = dragNode;
}

function dragNode(e) {
    e = e || window.event;
    e.preventDefault();

    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
	
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    nodeToDrag.style.top = (nodeToDrag.offsetTop - pos2) + "px";
    nodeToDrag.style.left = (nodeToDrag.offsetLeft - pos1) + "px";
}

function endNodeDrag() {
    // stop moving when mouse button is released:
    console.log("end drag");
    document.onmouseup = null;
    document.onmousemove = null;
}
	</script>
</body>
</html>